<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css?version=3" />
	<title></title>
	<style>
		.china-map {
			max-width: 100%;
			margin: 10px auto;
			width: 750px;
			height: 750px;
		}
		.sex-statistics {
			max-width: 100%;
			margin: 10px auto;
			width: 600px;
			height: 600px;
		}
		.label-statistics {
			max-width: 100%;
			margin: 10px auto;
			width: 950px;
			height: 700px;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="btn-group btn-group-justified btn-tab" role="group" aria-label="button-group">
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel1" class="btn btn-default active">区域统计</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel2" class="btn btn-default">性别统计</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel3" class="btn btn-default">标签统计</button>
			</div>
		</div>
		<div class="tab-content">
			<div id="tab-panel1" class="tab-pane active">
		  		<div id="chinaMap" class="china-map"></div>
			</div>
			<div id="tab-panel2" class="tab-pane">
		  		<div id="sexStatistics" class="sex-statistics"></div>
			</div>
			<div id="tab-panel3" class="tab-pane">
		  		<div id="labelStatistics" class="label-statistics"></div>
			</div>
		</div>	
	</div>
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/echarts.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/china.js" ></script>
	<script type="text/javascript">
		document.write('<script type="text/javascript" src="../../js/utils/boot.js?v='+new Date().getTime()+'" ><\/script>');
	</script>
	<script>
		var userID,companyID;
		var chinaMap = echarts.init(document.getElementById('chinaMap'));
		var sexStatistics = echarts.init(document.getElementById('sexStatistics'));
		var labelStatistics = echarts.init(document.getElementById('labelStatistics'));
		$(function(){
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			initChinaMap();
		});
		$(".btn-tab").on("click", "button", function(){
			$(".btn-tab button").removeClass("active");
			$(this).addClass("active");
			var panelId = $(this).attr("panel-data");
			$(".tab-content .tab-pane").removeClass("active");
			$("#"+panelId).addClass("active");
			if (panelId == "tab-panel1") {//区域统计
				initChinaMap();
			}else if (panelId == "tab-panel2") {//性别统计
				initSexStatistics();
			}else if (panelId == "tab-panel3") {//标签统计
				initLabelStatistics();
			}
		});
		function initChinaMap(){
			base.postData(base.url.chinaMap, {userID:userID,companyID:companyID}, callbackChinaMap);
		}
		function callbackChinaMap(data){
			if (data.success) {
				var option = {
			        title : {
			            text: '人数地图分布',
			            subtext: '人数分布',
			            x:'center'
			        },
			        tooltip : {
			            trigger: 'item'
			        },
		//	        legend: {
		//	            orient: 'horizontal',//图例的排列方向
		//	            x:'left',//图例的位置
		//	            data:['订单量']
		//	        },
			        dataRange: {
			            min: 0,
			            max: data.context.chinaMap.max,
			            text:['高','低'],           // 文本，默认为数值文本
			            calculable : true
			        },
			        toolbox: {
			            show : true,
			            orient : 'vertical',
			            x: 'right',
			            y: 'center',
			            feature : {
			                mark : {show: true},
			                dataView : {show: true, readOnly: false},
			                restore : {show: true},
			                saveAsImage : {show: true}//保存为图片。
			            }
			        },
			        roamController: {//控制地图的上下左右放大缩小 图上没有显示
			            show: true,
			            x: 'right',
			            mapTypeControl: {
			                'china': true
			            }
			        },
			        series : [
			            {
			                name: '人数',
			                type: 'map',
			                mapType: 'china',
			                roam: true,//是否开启鼠标缩放和平移漫游
			                mapLocation: {
					            x : 'center',
					            y : 'center'
					            // width    // 自适应
					            // height   // 自适应
					        },
			                data:data.context.chinaMap.dataList
			            }
			        ],
			        animation: true
			    };
			    chinaMap.setOption(option);
			}
		}
		function initSexStatistics(){
			base.postData(base.url.sexMap, {userID:userID,companyID:companyID}, callbackSexMap);
		}
		function callbackSexMap(data){
			if (data.success) {
				option = {
				    title : {
				        text: '性别比例统计',
				        subtext: '性别分布',
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        left: 'left',
				        data: data.context.data
				    },
				    series : [
				        {
				            name: '性别数据',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:data.context.dataName,
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				};
				sexStatistics.setOption(option);
			}
		}
		function initLabelStatistics(){
			base.postData(base.url.getLableNum, {userID:userID,companyID:companyID}, callbackGetLableNum);
		}
		function callbackGetLableNum(data){
			if (data.success) {
				option = {
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : data.context.dataName,
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'标签数量',
				            type:'bar',
				            barWidth: '60%',
				            data:data.context.data
				        }
				    ]
				};
				labelStatistics.setOption(option);
			}
		}
	</script>
</body>
</html>
